<template>
	<div class="spread con customer_index">
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  	<el-breadcrumb-item :to="{ path: '/sales' }">homepage</el-breadcrumb-item>
		  	<el-breadcrumb-item>SalesOrderItem List</el-breadcrumb-item>
		</el-breadcrumb>
	<div>
		
		<div style="margin-top:10px;">
				<el-button  type="danger" v-if="this.StatusID ==1" icon="el-icon-tickets" @click="Release(100)">Release</el-button>
				<el-button  type="danger" v-else icon="el-icon-tickets" @click="Release(1)">Cancel Release</el-button>	
			
			<!--<el-button  type="danger" icon="el-icon-tickets" @click="view()">View</el-button>
			<el-button  type="danger" icon="el-icon-tickets" @click="Edit()">Edit</el-button> -->
			
			
			<!--<div style="float:right ">
				<el-pagination
					background
					layout="prev, pager, next"
					:total="page.per_page"
					:page-size="page.size"
					@current-change="handleCurrentChange"
					:current-page.sync="page.currentPage"
				></el-pagination>
			</div> -->
			
		</div>
	</div>
		  <!-- 订单详情  -->
		  <div>
		     <el-divider  content-position="left" >Sales Order Item</el-divider>  
		  </div>
		  
		  <div style="margin-top:10px;">
			<el-button  type="info" icon="el-icon-tickets" @click="PR()">PR</el-button>	
		  </div>
		  
		  <el-table 
		  	v-loading="loading"
			element-loading-text="loading"
		    :data="tableOrderItem"
		    style="width: 100%;margin=top:0px;"
			:height=tableHeight
		    border
		    fit
		    highlight-current-row
		    @row-click="rowClick"
    		@current-change="handleCurrentOrederItem"
		   >
		    <el-table-column
		      label="Status" width="120">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.StatusName }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="Brand Alias" width="160" >
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.BrandAlias }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="PartNo" width="200">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.PartNo }}</span>
		      	</template>
		    </el-table-column>
		    
		     <el-table-column
		      label="PriceEach"  width="100">
		      	<template slot-scope="scope">
		        	<span>{{ toDecimal(scope.row.PriceEach) }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="OrderQty" width="100"> 
		      	<template slot-scope="scope">
		        	<span >{{  scope.row.OrderQty }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="Amount" width="100"> 
		      	<template slot-scope="scope">
		        	<span >{{  toDecimal(scope.row.Amount) }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="ShipQty" width="100">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.ShipQty }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="ScheduleDate" width="120"> 
		      	<template slot-scope="scope">
		        	<span >{{  objTimeString(scope.row.ScheduleDate) }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="DateCode" width="120">
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.DateCode }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="Package"  width="120">
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.Package }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="Packing" width="100">
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.Packing }}</span>
		      	</template>
		    </el-table-column>
		  </el-table>
		  
		  <!-- PR 列表 -->
		  <el-table 
			element-loading-text="loading"
		    :data="tableDataPR"
		    style="width: 100%"
			:height="tableHeight"
		    border
		    fit
		    highlight-current-row
    		@current-change="shandleCurrentChange"
    		
		   >
		    <el-table-column
		      label="PRStatus" width="120">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.PRStatusName }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="PurchRep" width="160" >
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.PurchRepIDName }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="PRQty" width="120">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.PRQty }}</span>
		      	</template> 
		    </el-table-column>
			
			<el-table-column
		      label="SetPurchRepBy" width="160"> 
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.SetPurchRepByName }}</span>
		      	</template>
		    </el-table-column>
		  </el-table>
		 
		 <!-- PR  -->
		 <el-dialog title="Add New OrderItem" :visible.sync="PRVisiable">
		 	
		 	 <el-form>
		  	 	 <el-form-item >
			  		 <el-checkbox-group v-model="PurchRepID">
			  			<!-- <el-radio v-for="(item,index) in BuyerList"  v-model="item.employeeID" :label="item.employeeID" :key="item.employeeID">{{item.employeeName}}</el-radio> -->
			     	 	<el-checkbox v-for="(item,index) in BuyerList"  v-model="item.employeeID" :label="item.employeeID" :key="item.employeeID">{{item.employeeName}}</el-checkbox>
				     </el-checkbox-group>   
				  </el-form-item>
				  
				   <el-form-item  label="PRQty" >
				  	 <el-input v-model.number="PRQty" autocomplete="off" style="float:left;width: 300px;" ></el-input>
				   </el-form-item>
				   
				 <el-form-item >
				    	<el-button type="primary" @click="PRSave">Save</el-button>
				    	<el-button  @click="PRVisiable = false">Cancel</el-button>
				 </el-form-item> 
			 </el-form>
		 	
		 	
		 	
		 </el-dialog>
		  
	</div>
</template>

<script type="text/javascript">
	export default {
		data(){
			var sdDate = [];
			return {
				loading:false,
				tableData: [],
				tableHeight: 300,
				token:"",
				listQuery:{sortby:'',order:'desc'},
				fileDwonload:false,
				customerstatus:100,
				customername:'',
				currentRow: [],
				rantime:[],
				
				tableOrderItem:[],
				currentRowOrederItem:'',
				SalesOrderID:'',
				CustomerID:'',
				StatusID:1,
				SalesRepID:'',
				
				PRVisiable:false,
				BuyerList:[],
				PurchRepID:[],  
				PRQty:0,
				tableDataPR:[],
				
				
				
				page: {
					 total: 0,
					 size: 1, 
					 currentPage: 1,
					 num: 1,
					
					 },
					
					}
				},
				 
		created(){
				this.token = window.axios.defaults.headers.common['X-CSRF-TOKEN'];
				
				this.SalesOrderID =parseInt(this.$route.query.SalesOrderID);
				this.CustomerID =parseInt(this.$route.query.CustomerID); 
				this.SalesRepID = parseInt(this.$route.query.SalesRepID); 
				//this.StatusID =parseInt(this.$route.query.StatusID);
				this.getSalesItemList();
				this.SalesOrderDetail();
		},
		mounted() {
			const that = this;
			// 动态设置表格高度适应窗口
			window.onresize = () => {
				let a = window.innerHeight;
				that.tableHeight = a-403;
			}
		},
		methods:{
			getSalesItemList(){
				this.loading = true;
				axios.get('/api/sale/salesorderitem?page='+this.page.num+'&SalesOrderID=' +this.SalesOrderID).then(result => {
						if (result.data.code == 200) {
							this.tableOrderItem = result.data.result;
							this.page.total = result.data.total;
							//this.page.size = result.data.size;
							this.page.per_page = result.data.last_page;
							this.loading = false;
						} else {
							this.$notify.error({
								title: 'Fail',
								message: result.data.message
							});
						}
					})
					.catch(error => {
						this.$notify.error({
							title: 'Fail',
							message: 'ERROR'
						});
					});
			},
			
			SalesOrderDetail(){
				axios.get('/api/sale/salesorderdetail?SalesOrderID='+this.SalesOrderID).then(result => {
						this.StatusID = result.data.result.StatusID;
					});
			},
			getBuyerList(){
				axios.get('/api/getBuyerRep').then(result => {
					this.BuyerList = result.data.result;
				});
				},
			view(){
				if (this.currentRow.length <= 0) {
					this.$notify({ type: 'error', message: 'Please choose one line.' });
					return false;
				}
				//this.$router.push({ path: '/customer/detail?CompanyID='+this.currentRow.CompanyID+'&CustomerID='+this.currentRow.CustomerID});
			},
			Edit(){
				if (this.currentRow.length <= 0) {
					this.$notify({ type: 'error', message: 'Please choose one line.' });
					return false;
				}
			},
			
		    getCookie(name){
				var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
				if(arr=document.cookie.match(reg)){
					return unescape(arr[2]);
				}else{
					return null;
				}
			},
		    handleCurrentChange(val) { 
               this.page.num = val;
                this.getSalesItemList();
            },
            
           
            handleCurrentOrederItem(val){
            	 this.currentRowOrederItem= val;
            },
		    //
		    Release(val){
		    	axios.post('/api/sale/SalesOrderStatus', {
							CustomerID  : this.CustomerID,
							SalesOrderID : this.SalesOrderID,
							StatusID:val,
						  })
						  .then(res => {
							if(res.data.code ==200){
								this.$notify({
								  title: 'Success',
								  message: res.data.message,
								  type: 'success'
								});
								//this.getSalesItemList();
								this.$router.go(0);
							}
						  })
						  .catch(error => {
							  this.$notify.error({
							    title: 'Fail',
							    message: 'ERROR',
							  });
						  })
		    },
		    //PR
		    PR(){
		    	if(this.currentRowOrederItem.length<=0){
		    		this.$notify({ type: 'error', message: 'Please choose one line.' });
					return false;
		    	}
		    	this.getBuyerList();
		    	this.PRVisiable =true;
		    },
		    PRSave(){
		    	if(this.PurchRepID.length !=1){
		    		this.$alert('Please select purchrep .', 'Tips', {
		                  confirmButtonText: 'confirm'
				        });
				        return;
				 }
				 var regPos = /^\d+$/; // 非负整数
					if(!regPos.test(this.PRQty) || this.PRQty ==0){
						this.$alert('Please Input numeric.', 'Tips', {
		                  confirmButtonText: 'confirm'
				        });
				        return;
					}
				axios.post('/api/sale/PRAdd', {
							PRQty  : this.PRQty,
							SalesOrderID : this.SalesOrderID,
							PurchRepID : this.PurchRepID,
							SalesOrderItemID:this.currentRowOrederItem.SalesOrderItemID,
							SalesRepID :this.SalesRepID
						  })
						  .then(res => {
							if(res.data.code ==200){
								this.$notify({
								  title: 'Success',
								  message: res.data.message,
								  type: 'success'
								});
								this.PRVisiable =false;
								this.getSalesItemList();
							}
						  })
						  .catch(error => {
							  this.$notify.error({
							    title: 'Fail',
							    message: 'ERROR',
							  });
						  })
		    },
		    
		    //PR -列表
		    rowClick(row){
            	var SalesOrderItemID =  row.SalesOrderItemID;
            	var SalesOrderID =  row.SalesOrderID;
            	axios.get('/api/sale/PRList?SalesOrderID='+SalesOrderID + '&SalesOrderItemID='+SalesOrderItemID).then(result => {
					this.tableDataPR = result.data.result;
				});
            },
		    shandleCurrentChange(val){
		    	console.log(val);
		    },
		    
		    handleDelete(index, row) {
		        axios.get('/api/order/status?id='+row.id+"&type=2"+"&order_sn="+row.order_sn)
					.then(res => {
						this.$notify({
	    					type:"success",
	    					title:"Success",
	    					message:res.data.message
	    				})
	    				
					})
		    },
		    isTimeString(time){
		    	if(time=='' || time== null || time == 'undefined'){
		    	 return '';
		    	}else{
		    		return time.substring(0,10);
		    	}
		    },
		    
		    objTimeString(time){
			    if(time=='' || time== null || time == 'undefined'){
			    	 return '';
			    	}else{
			    		return time.date.substring(0,10);
			    	}
		    },
		   toDecimal(x) {
		      var f = parseFloat(x); 
		      if (isNaN(f)) { 
		        return false; 
		      } 
		      var f = Math.round(x*100)/100; 
		      var s = f.toString(); 
		      var rs = s.indexOf('.'); 
		      if (rs < 0) { 
		        rs = s.length; 
		        s += '.'; 
		      } 
		      while (s.length <= rs + 2) { 
		        s += '0'; 
		      } 
		      return s; 
		    },
		    addTime(m){
		    	return m<10?'0'+m:m 
		    },
		    
			getTime(){
				var date = new Date()
			    let y = date.getFullYear()
			    let m = date.getMonth() + 1
			    let d = date.getDate()
			    let time = y + '-' + m + '-' + d;
				let d1 = '01';
				let time1 = y + '-' + m + '-' + d1;
				this.rantime[0]=time1;
			    this.rantime[1]=time;
			},
			
			timeFormat(shijianchuo)
			{
				//shijianchuo是整数，否则要parseInt转换
				var time1 = new Date(shijianchuo);
				var y = time1.getFullYear();
				var m = time1.getMonth()+1;
				var d = time1.getDate();
				var h = time1.getHours();
				var mm = time1.getMinutes();
				var s = time1.getSeconds();
				return y+'-'+this.addTime(m)+'-'+this.addTime(d)+' '+this.addTime(h)+':'+this.addTime(mm)+':'+this.addTime(s);
			}
			
		}
	}
</script>

<style lang="scss">
	.customer_index{
		.sort.el-select .el-input {
			width: 140px;
		}
	}
  	.el-table .warning-row {
    	background: oldlace;
  	}
  	.el-select .el-input {
    	width: 120px;
  	}
  	.input-with-select .el-input-group__prepend {
    	background-color: #fff;
  	}
  	.el-table .success-row {
    	background: #f0f9eb;
  	}
  	.con{
	    .el-breadcrumb{ 
	      	height: 40px;
	    }
	 .juli{
	 	margin-left:10px;
	 	}   
  	}
	.el-pagination__total{
		float: left;
		margin-top: 2px;
	}
	.pages{
		float: right;
	}
</style>
